<template>
  <div class="mod-config">
    <basic-container>
        <navigationZhuanX :sign="{a:true,b:false,c:false,d:false,e:false}"></navigationZhuanX>
        <div class="boxsty zhiBiao">
            <div  :height="searchheight" >
                <span style="float:right;margin-top: -30px;cursor: pointer;" @click="searchchangeadvanced">{{ searchadvanced ? "查询条件收起" : "查询条件展开" }}
                <i :class="searchadvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" /> </span>
                <div  v-show="searchadvanced" >
                    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()"  class="form-inline">
                        <el-form-item label="工作名称">
                            <el-input v-model="dataForm.workname" placeholder="工作名称" :clearable="true"></el-input>
                        </el-form-item>
                        <el-form-item label="姓名">
                            <el-input v-model="dataForm.cyryname" placeholder="姓名" :clearable="true"></el-input>
                        </el-form-item>
                        <el-form-item label="职务">
                            <el-input v-model="dataForm.cyrydepartname" placeholder="职务" :clearable="true"></el-input>
                        </el-form-item>
                        <el-form-item label="结束时间">
                            <el-date-picker
                                v-model="dataForm.jsdate"
                                type="date"
                                format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd"
                                placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item>
                            <el-button icon="el-icon-search" type="primary" class="marginLeft"
                                        @click="showDatalist()">检索
                            </el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <div>
                专项工作
                <div v-if="showZhong==2" style="float:right">
                    <!-- <el-button type="primary" @click="reviewBatch">批量审核</el-button>
                    <el-button type="primary">批量驳回</el-button>
                    <el-button type="primary"   @click="fanhui()">返回</el-button> -->
                </div>
            </div>
            <el-table
                style="width: 100%;margin-top:20px"
                :data="dataList"
                v-if="showZhong==1"
                border
                v-loading="dataListLoading">
                <el-table-column type="selection" width="55" header-align="center" align="center"></el-table-column>
                <el-table-column type="index" width="80" header-align="center" align="center" label="序号"></el-table-column>
                <el-table-column
                    prop="cyryname"
                    header-align="center"
                    align="center"
                    min-width="100"
                    label="姓名">
                </el-table-column>
                <el-table-column
                    prop="cyrydepartname"
                    header-align="center"
                    align="center"
                    min-width="120"
                    label="职务">
                </el-table-column>
                <el-table-column
                    prop="renwuNum"
                    header-align="center"
                    align="center"
                    min-width="120"
                    label="任务数量">
                    <template slot-scope="scope">
                        <el-popover
                            placement="left"
                            width="300"
                            trigger="hover">
                            <el-table :data="scope.row.gridData">
                               <el-table-column min-width="90" property="gzmc" label="工作任务"></el-table-column>
                               <el-table-column min-width="90" property="pfr" label="打分人"></el-table-column>
                                <el-table-column min-width="90" property="shstate" label="审批状态"></el-table-column>
                            </el-table>
                            <div slot="reference" class="name-wrapper">
                                <span  style="cursor: pointer;">{{scope.row.renwuNum}}</span>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="jssj"
                    header-align="center"
                    align="center"
                    min-width="120"
                    label="最近结束时间">
                </el-table-column>
                <el-table-column
                    header-align="center"
                    align="center"
                    fixed="right"
                    min-width="90"
                    label="操作">
                    <template slot-scope="scope">
                    <el-button type="primary" plain size="small" @click="checks(scope.row)" >查看
                    </el-button>

                    </template>
                </el-table-column>
            </el-table>
            <div class="avue-crud__pagination">
              <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
                             :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" background
                             layout="total, sizes, prev, pager, next, jumper">
              </el-pagination>
            </div>

        </div>
      <zxshForm   ref="zxshFormid"  v-if="showZhong==2" :zxshcyid="zxshcyid" v-on:zxshC='zxshC'></zxshForm>
    </basic-container>
  </div>
</template>

<script>
import zxshForm from '@/views/hetongrenwu/zhuanxianggongzuo/zhuanxianggzsh/zxgzsh/zxsh-form'
import {fetchList} from "@/api/hetongrenwu/zhuanxianggongzuo/zxgzshenhe";
import {page} from '@/api/hetongrenwu/zhuanxianggongzuo/zxgzchuangjian'
export default {
    components:{
        zxshForm
    },
    data(){
        return{
            form:{},
            searchadvanced: true,
            searchheight: '0',
            dataForm:{},
            showZhong:1,
            dataList:[{htMs:"2"}],
            dataListLoading:false,
            gridData:[],
            pageIndex: 1,
            pageSize: 10,
            totalPage: 0,
            zxshcyid:Number
        }
    },
    created() {
      this.getDataList()
    },
    methods:{
        //批量审核
        reviewBatch(){
            this.$confirm('是否要通过审批?','提示' ,{
                confirmButtonText: '通过',
                cancelButtonText: '不通过',
                type: 'warning'
            }).then(() => {
            this.$message({
                type: 'success',
                message: '通过成功!'
            });
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消通过'
            });
            });
        },
        checks(obj){
            this.showZhong=2;
             this.zxshcyid = obj.id;

            this.$nextTick(() => {
                this.$refs.zxshFormid.getDataList()
            })
        },
        zxshC(zxshC){
            if(zxshC){
                this.showZhong=1;
                this.getDataList();
            }
        },
        searchchangeadvanced() {
            this.searchadvanced = !this.searchadvanced;
            if(this.searchadvanced){
                this.searchheight= 'auto'
            }
        },

      // 获取数据列表
      getDataList() {
        this.dataListLoading = true
         page(Object.assign({

            current: this.pageIndex,
            size: this.pageSize
        },this.dataForm)).then(response => {
            this.dataList = response.data.data.records;
            this.totalPage = response.data.data.total;
            this.$nextTick(function(){
            this.dataListLoading = false
            })
        })
      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val
        this.getDataList()
      },
      showDatalist(){
         //console.log("=====----"+this.showZhong)
          if(this.showZhong==2){
               this.$refs.zxshFormid.getqueryDataList(this.dataForm);
          }
          if(this.showZhong==1){
              this.getDataList();
          }
      }
    }
}
</script>

<style>

</style>
